<template>
	<view class="rainAccount-box">
		<view class="list-table-box mt20">
			<view class="header-title">
				<view class="block"></view>
				<text>{{ areaName }} 气温统计表</text>
			</view>
			<s-table
				:columns="tableData.columns"
				:datas="tableData.datas"
				:sortKey="tableData.sortKey"
				@customRow="customRow"
			></s-table>
		</view>
	</view>
</template>
<script>
	import controlApi from '@/api/monitor/control.js'
	import moment from 'moment'
	import { debounce, getWindPowerLevel } from '@/utils/util'
	import tool from '@/utils/tool.js'
	export default {
		name: 'rainAccount-box',
		components: {
			listSelect: () => import('@/components/common/select/listSelect.vue'),
			'ec-rain': () => import('@/components/home/ec-rain.vue')
		},
		props: {
			areaCode: {
				type: null,
				default: null
			},
			time: {
				type: null,
				default: null
			},
			areaName: {
				type: null,
				default: null
			},
			searchValue: {
				type: String,
				default: () => ''
			}
		},
		data() {
			return {
				tableData: {
					sortKey: 'drpOneH',
					columns: [
						{ title: '序号', key: 'index', isClick: false },
						{ title: '站点', key: 'siteName', width: '250rpx' },
						{ title: '气温℃', key: 'temValue' },
						{ title: '日期/时段', key: 'time', width: '260rpx' }
					],
					datas: []
				}
			}
		},
		computed: {},
		mounted() {},
		methods: {
			async init() {
				uni.showLoading({
					title: '正在加载'
				})
				const resp = await controlApi.GetExtremumSiteNoAndValue({
					StartTime: moment(this.time).subtract(24, 'hours').format('YYYY-MM-DD HH:00'), // '2023-08-16 14:00', //moment(this.time).format('YYYY-MM-DD HH:00'), //
					EndTime: moment(this.time).format('YYYY-MM-DD HH:00'),
					Elements: ['T'],
					AreaCode: this.areaCode.slice(0, 6),
					SpotDataType: 0
				})
				this.$hideLoading()
				const rain = await controlApi.stationToLogtdLattd('WPStationPP')
				let features = rain.data.features
				if (!this.siteObjKey) {
					let siteObjKey = {}
					features.forEach((el) => {
						let properties = el.properties
						siteObjKey[properties.id] = properties
					})
					this.siteObjKey = siteObjKey
				}

				// this.tableData.datas = resp.data.data
				const data = resp.data.data.map((item) => {
					item.temValue = item.vals.t.val
					item.time = moment(item.vals.t.time).format('DD日HH:mm')
					return item
				})
				let arrList = data.filter((el) => {
					return el.siteName.indexOf(this.searchValue) > -1 || this.searchValue == ''
				})
				arrList = arrList.filter((el) => {
					let item = this.siteObjKey[el.siteNo]
					return (
						item.administrativeAreaId.slice(0, 6) == this.areaCode.slice(0, 6) || this.areaCode.slice(0, 6) == '350400'
					)
				})
				this.tableData.datas = arrList
					.sort((a, b) => b.temValue - a.temValue)
					.map((el, index) => {
						el.index = index + 1
						return el
					})
			},

			customRow(item) {
				let lat = item.lat || item.latitude
				let lon = item.lon || item.longitude
				uni.$emit('flyMap', { lat, lon, zoom: 14.5 })
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style lang="less">
	.rainAccount-box {
		width: 100%;
		height: 100%;
		.list-table-box {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			box-shadow: 0px 4rpx 30rpx 0px rgba(0, 0, 0, 0.08);
			margin-top: 40rpx;
			padding: 15rpx;
			.header-title {
				width: 100%;
				display: flex;
				color: #3d3d3d;
				font-family: PingFang SC;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 500;
				align-items: center;
				justify-content: flex-start;
				color: #3d3d3d;
				text-align: center;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 550;
				margin: 20rpx 0;
				.block {
					width: 6rpx;
					height: 37rpx;
					background: #0094ff;
					border-radius: 7rpx;
					margin-right: 10rpx;
				}
			}
			.title-box {
				width: 248rpx;
				border: 1rpx solid #cecece;
				border-radius: 10rpx;
				height: 60rpx;
			}
		}
	}
</style>
